"use client"

type Token = {
  name: string
  symbol: string
  address: string
}

const popularTokens: Token[] = [
  {
    name: "Bonk",
    symbol: "BONK",
    address: "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
  },
  {
    name: "Jito",
    symbol: "JTO",
    address: "576NRVg37rKEcJqoxXRDvodbxcmnuNozNcyvXY5upump",
  },
  {
    name: "Pyth",
    symbol: "PYTH",
    address: "HZ1JovNiVvGrGNiiYvEozEVgZ58xaU3RKwX8eACQBCt3",
  },
]

type PopularTokensProps = {
  onSelectToken: (address: string) => void
}

export default function PopularTokens({ onSelectToken }: PopularTokensProps) {
  return (
    <div className="flex items-center">
      <span className="text-sm font-bold mr-2 whitespace-nowrap">Popular:</span>
      <div className="flex flex-wrap gap-2">
        {popularTokens.map((token) => (
          <button
            key={token.address}
            onClick={() => onSelectToken(token.address)}
            className="win95-button bg-[#c0c0c0] px-2 py-1 text-xs"
          >
            {token.symbol}
          </button>
        ))}
      </div>
    </div>
  )
}
